<template>
  <div id="tel">
    <group class="tel">
      <group-title slot="title" class="group-title"><span>{{label}}</span><span class="required"
                                                                                v-show="item.required">*</span>
      </group-title>
      <x-input :is-type="checkMobile" type="tel" mask="999 9999 9999" :placeholder="description"
               placeholder-align="left" text-align="left" v-model='formData'>
        <template slot="label"><!-- use scope="props" when vue < 2.5.0 -->
          <popup-picker title="" v-model="telCode" :data="list" @on-change="onChange"></popup-picker>
        </template>
      </x-input>
    </group>
  </div>
</template>


<script type="text/ecmascript-6">
  /* eslint-disable*/
  import {
    Selector,
    Group,
    Cell,
    XInput,
    GroupTitle,
    PopupPicker
  } from 'vux'

  export default {
    props: {
      item: {
        type: Object,
        required: true
      },
      index: {
        type: Number,
        required: true
      },
    },
    data () {
      return {
        list: [[
          '+1',
          '+7',
          '+20',
          '+27',
          '+30',
          '+31',
          '+32',
          '+33',
          '+34',
          '+36',
          '+39',
          '+40',
          '+43',
          '+44',
          '+45',
          '+46',
          '+47',
          '+48',
          '+49',
          '+51',
          '+52',
          '+53',
          '+54',
          '+55',
          '+56',
          '+57',
          '+58',
          '+60',
          '+61',
          '+62',
          '+63',
          '+64',
          '+65',
          '+66',
          '+81',
          '+82',
          '+84',
          '+86',
          '+90',
          '+91',
          '+92',
          '+93',
          '+94',
          '+95',
          '+98',
          '+212',
          '+213',
          '+216',
          '+218',
          '+220',
          '+221',
          '+223',
          '+224',
          '+225',
          '+226',
          '+227',
          '+228',
          '+229',
          '+230',
          '+231',
          '+232',
          '+233',
          '+234',
          '+235',
          '+236',
          '+237',
          '+239',
          '+241',
          '+242',
          '+243',
          '+244',
          '+247',
          '+248',
          '+249',
          '+251',
          '+252',
          '+253',
          '+254',
          '+255',
          '+256',
          '+257',
          '+258',
          '+260',
          '+261',
          '+262',
          '+263',
          '+264',
          '+265',
          '+266',
          '+267',
          '+268',
          '+327',
          '+331',
          '+350',
          '+351',
          '+352',
          '+353',
          '+354',
          '+355',
          '+356',
          '+357',
          '+358',
          '+359',
          '+370',
          '+371',
          '+372',
          '+373',
          '+374',
          '+375',
          '+376',
          '+377',
          '+378',
          '+380',
          '+381',
          '+386',
          '+420',
          '+421',
          '+423',
          '+501',
          '+502',
          '+503',
          '+504',
          '+505',
          '+506',
          '+507',
          '+509',
          '+591',
          '+592',
          '+593',
          '+594',
          '+595',
          '+596',
          '+597',
          '+598',
          '+599',
          '+673',
          '+674',
          '+675',
          '+676',
          '+677',
          '+679',
          '+682',
          '+684',
          '+685',
          '+689',
          '+850',
          '+852',
          '+853',
          '+855',
          '+856',
          '+880',
          '+886',
          '+960',
          '+961',
          '+962',
          '+963',
          '+964',
          '+965',
          '+966',
          '+967',
          '+968',
          '+971',
          '+972',
          '+973',
          '+974',
          '+976',
          '+977',
          '+992',
          '+993',
          '+994',
          '+995',
          '+1242',
          '+1246',
          '+1264',
          '+1268',
          '+1345',
          '+1441',
          '+1664',
          '+1670',
          '+1671',
          '+1758',
          '+1784',
          '+1787',
          '+1809',
          '+1876',
          '+1890',
        ]
        ],
        telCode: ['+86'],
        formData: '',
      }
    },
    created () {
      console.log(this.item)
      console.log(this.item.label)
      console.log(this.item.tel)
      this.label = this.item.label
      this.placeholder = this.item.placeholder
      this.description = this.item.description
      this.required = this.item.required
      this.telCode=this.item.area||['+86']
      this.formData=this.item.tel
    },
    methods: {
      onChange(){
        //console.log(this.formData)
        this.formData += ' '
      },
      popTel(){
        this.$emit('tel', {
          tel: str,
          index: this.index,
          telCode: this.telCode[0]
        })
      },
      checkMobile: function (str) {
        // console.log(this.index)
        // console.log(this.formData)
        // console.log(this.telCode)
        this.$emit('tel', {
          tel: str,
          index: this.index,
          telCode: this.telCode[0]
        })

        if (this.telCode[0] === '+86') {
          //去除空格
          str = str.replace(/\s+/g, "")
          return {
            valid: (/^1[1234567890]\d{9}$/.test(str)),
            msg: '请填写符合规则的手机号码'
          }
        } else {
          return {
            valid: true,
          }
        }
      },
    },
    components: {
      Selector,
      Cell,
      Group,
      XInput,
      GroupTitle,
      PopupPicker
    }
  }
</script>


<style lang="less" rel="stylesheet/less">

  #tel .tel .vux-x-input {
    padding: 0;
  }

  #tel .tel .weui-select {
    width: 105px;
    box-sizing: border-box;
  }

  #tel .tel .weui-cell__primary {
    padding-left: 15px;
  }

  #tel .tel .weui-cell__hd:after {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid #e5e5e5;
    color: #e5e5e5;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
  }
</style>

